<template>
	<view class="home">
		<!-- 导航栏 -->
		<view class="topnav">
			<u-tabs
				:list="navlist"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				@click="clickNav"
			></u-tabs>
		</view>

		<!-- 骨架屏 -->
		<view class="loadingState" v-show="loadState">
			<u-skeleton rows="4" loading title></u-skeleton>
		</view>

		<view class="content">
			<view class="item" v-for="item in datalist">
				<blog-item @delEvent="P_delEvent" :item="item" :isLike.sync="item.isLike" :like_count.sync='item.like_count'></blog-item>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="">
			<uni-load-more :status="uniLoad"></uni-load-more>
		</view>

		<view class="edit" @click="goEdit">
			<text class="iconfont icon-a-21-xiugai"></text>
		</view>
	</view>
</template>

<script>
import { store } from '@/uni_modules/uni-id-pages/common/store.js';
//连接云数据库
const db = uniCloud.database();
const dbCmd = db.command;
export default {
	data() {
		return {
			//导航列表
			navlist: [
				{
					name: '最新',
					type: 'publish_date'
				},
				{
					name: '热门',
					type: 'view_count'
				}
			],
			navActive: 0, //当前导航
			datalist: [], //博客列表
			loadState: true, //控制骨架屏显示
			uniLoad: 'more', //下拉触底动画
			noMore: false //是否还有更多
		};
	},
	onLoad() {
		this.getData();
	},
	// 触底
	onReachBottom() {
		this.uniLoad = 'loading';
		if (this.noMore) return (this.uniLoad = 'noMore');
		this.getData();
	},
	methods: {
		// 删除时触发
		P_delEvent() {
			this.datalist = [];
			this.getData();
		},
		async getData() {
			//联表查询
			let artTemp = db
				.collection('quanzi_article')
				.where('delState != true')
				.field('title, user_id, description, picurls, comment_count, like_count, view_count, publish_date')
				.getTemp();
			let userTemp = db.collection('uni-id-users').field('_id, username, nickname, avatar_file').getTemp();

			await db
				.collection(artTemp, userTemp)
				.orderBy(this.navlist[this.navActive].type, 'desc')
				.skip(this.datalist.length)
				.limit(5)
				.get()
				.then(async (res) => {
					if (res.result.data.length < 5) {
						this.noMore = true; //没有更多了
					}
					//下拉触底，拼接数据
					let oldArr = this.datalist;
					let resDataArr = [...oldArr, ...res.result.data];
					let idArr = [];

					if (store.hasLogin) {
						//当前文章id集合
						resDataArr.forEach((item) => {
							idArr.push(item._id);
						});
						// 查找当前用户对文章集合 点赞过的文章集合
						let likeRes = await db
							.collection('quanzi_like')
							.where({
								article_id: dbCmd.in(idArr),
								user_id: uniCloud.getCurrentUserInfo().uid
							})
							.get();
						console.log('点赞过', likeRes);

						// 根据点赞过的文章筛选点赞过的文章索引 ，添加isLike属性用于高亮
						likeRes.result.data.forEach((item) => {
							let findIndex = resDataArr.findIndex((find) => {
								return item.article_id == find._id;
							});
							resDataArr[findIndex].isLike = true;
						});
					}

					this.datalist = resDataArr;
					this.loadState = false; //骨架屏消失
				});

			console.log('shuju', this.datalist);
		},

		//导航点击事件
		clickNav(e) {
			this.loadState = true;
			this.datalist = [];
			this.uniLoad = 'more';
			this.noMore = false;
			this.navActive = e.index;
			this.getData();
		},

		//跳转编辑页面
		goEdit() {
			uni.navigateTo({
				url: '/pages_blog/edit/edit'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.topnav {
	margin-bottom: 30rpx;
}
.loadingState {
	padding: 30rpx;
}
.content {
	.item {
		padding: 30rpx;
		border-bottom: #f7f7f7 15rpx solid;
	}
}
.edit {
	width: 120rpx;
	height: 120rpx;
	background: #0199fe;
	border-radius: 50%;
	color: #fff;
	position: fixed;
	z-index: 100;
	bottom: 150rpx;
	right: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);
	.iconfont {
		font-size: 50rpx;
	}
}
</style>
